<template>
  <div class="wrapper">
    <u-navbar title="售后详情">

      <div slot="right" v-if="afterSaleInfo.serviceStatus =='BUYER_RETURN' || afterSaleInfo.serviceStatus =='COMPLETE' &&  afterSaleInfo.serviceType !='RETURN_MONEY'"
        @click="showconfirmMethods('PASS')" class="done">
        <span v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">确认收货</span>
      </div>
    </u-navbar>
    <div class="box">
      <!-- 商品信息 -->
      <div class="flex goods-item">
        <div>
          <u-image width="150" height="150" :src="afterSaleInfo.goodsImage" mode="" />
        </div>
        <div class="wes-2 goods-name">{{afterSaleInfo.goodsName}}</div>
        <!-- 价格 -->
        <div class="flex goods-right-col">
          <div>x <span>{{afterSaleInfo.num}}</span></div>
        </div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
    <!-- 售后申请 -->
    <div class="box">

      <div class="title">{{afterSaleType}}申请</div>
      <div class="goods-total">
        <div class="flex col">
          <div>{{afterSaleType}}状态</div>
          <div>{{afterSaleInfo.serviceStatus | serviceStatusList }}</div>
        </div>
        <div class="flex col">
          <div>{{afterSaleType}}编号</div>
          <div>{{afterSaleInfo.sn }}</div>
        </div>
		<template v-if="serviceType === 'RETURN_GOODS' || serviceType === 'RETURN_MONEY'">
			<div class="flex col">
			  <div>{{afterSaleType}}原因</div>
			  <div>{{afterSaleInfo.reason  }}</div>
			</div>
			<div class="flex col">
			  <div>申请退款金额</div>
			  <div>{{afterSaleInfo.applyRefundPrice | unitPrice('￥')  }}</div>
			</div>
			<div v-if="afterSaleInfo.actualRefundPrice" class="flex col">
			  <div>实际退款金额</div>
			  <div>{{afterSaleInfo.actualRefundPrice | unitPrice('￥')  }}</div>
			</div>
			<div class="flex col" v-if="afterSaleInfo.refundPoint">
			  <div>退还积分</div>
			  <div>{{afterSaleInfo.refundPoint  }}</div>
			</div>
			
		</template>
        <div class="flex col">
          <div>{{afterSaleType}}数量</div>
          <div>{{afterSaleInfo.num }}</div>
        </div>
        <div class="flex col">
          <div>问题描述</div>
          <div>{{afterSaleInfo.problemDesc  }}</div>
        </div>
        <div class="flex col">
          <div>凭证</div>
          <div v-if="afterSaleImage == ''">暂无</div>
          <div v-else>
            <u-image @click="preview(afterSaleImage, index)" class="image" width="150" height="150" :src="item" v-for="(item, index) in afterSaleImage" :key="index"></u-image>
          </div>
        </div>
		<div class="flex col" v-if="afterSaleInfo.serviceStatus==='BUYER_TERMINATION' ">
		  <div>终止售后原因</div>
		  <div>{{afterSaleInfo.buyerRemark  }}</div>
		</div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
    <!-- 商家处理意见 -->
    <div class="box comments" v-if="afterSaleInfo.serviceStatus=='APPLY'">
      <div class="title">商家处理意见</div>
      <div class="flex col">
        <div>商家</div>
        <div>{{ afterSaleInfo.storeName }}</div>
      </div>
      <div class="flex col">
        <div>是否同意</div>
        <div>
          <u-switch active-color="#333" size="40" v-model="params.serviceStatus"></u-switch>
        </div>
      </div>
      <template v-if="serviceType === 'RETURN_GOODS' || serviceType === 'RETURN_MONEY'">
      	<div class="flex col">
      	  <div>申请退款金额</div>
      	  <div>{{ afterSaleInfo.applyRefundPrice | unitPrice('￥') }}</div>
      	</div>
      	<div class="flex col" v-if="params.serviceStatus">
      	  <div>实际退款金额</div>
      	  <div>
      	    <u-number-box style="margin-right:10rpx;" :positive-integer="false" v-model="params.actualRefundPrice" :min="0.1"></u-number-box> 元
      	  </div>
      	</div>
      </template>
      <div class="flex col">
        <div class="flex-2 flex-j-fs">备注信息</div>
        <div class="flex-2">
          <u-input type="textarea" v-model="params.remark" :custom-style="inputStyle"></u-input>
        </div>
      </div>
      <div class="submit" @click="handleSubmit">提交</div>
    </div>
    <!-- 商家处理 -->
    <div class="box" v-if="afterSaleInfo.serviceStatus!='APPLY'">
      <div class="title">商家处理</div>
      <div class="flex col">
        <div>商家</div>
        <div>{{ afterSaleInfo.storeName }}</div>
      </div>
      <div class="flex col">
        <div>审核结果</div>
        <div>{{afterSaleInfo.serviceStatus!='APPLY' && afterSaleInfo.serviceStatus!='REFUSE' ? '审核通过' : '审核拒绝'}}</div>
      </div>
      <div class="flex col ">
        <div>备注信息</div>
        <div> {{ afterSaleInfo.auditRemark }}</div>
      </div>
		<div class="flex col " v-if="afterSaleInfo.serviceStatus === 'SELLER_TERMINATION' ">
		  <div>卖家终止售后原因</div>
		  <div> {{ afterSaleInfo.auditRemark }}</div>
		</div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>

    <!-- 订单相关信息 -->
    <div class="box">
      <div class="title">订单相关信息</div>
      <div class="flex col">
        <div>订单编号</div>
        <div>{{ afterSaleInfo.orderSn }}</div>
      </div>
      <div class="flex col" v-if="afterSaleInfo.bankDepositName">
        <div>银行开户行</div>
        <div>
          {{afterSaleInfo.bankDepositName}}
        </div>
      </div>
      <div class="flex col" v-if="afterSaleInfo.bankAccountName">
        <div>银行开户名</div>
        <div>
          {{afterSaleInfo.bankAccountName}}
        </div>
      </div>
      <div class="flex col" v-if="afterSaleInfo.bankAccountNumber">
        <div>银行卡号</div>
        <div>
          {{afterSaleInfo.bankAccountNumber}}
        </div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
	<div class="box" v-if="orderStatus">
	  <div class="title">回寄物流信息</div>
	  <div class="flex col" v-if="afterSaleInfo.serviceType === 'EXCHANGE_GOODS'">
	    <div>换货状态</div>
	    <div>{{afterSaleInfo.serviceStatus | serviceStatusList }},待发货</div>
	  </div>
	  <div class="flex col" v-if="afterSaleInfo.serviceType === 'REPAIR_GOODS'">
	    <div>维修状态</div>
	    <div>{{afterSaleInfo.serviceStatus | serviceStatusList }},待发货</div>
	  </div>
	  <div class="query-log" @click="ship">去发货</div>
	</div>
    <div class="box" v-if="afterSaleInfo.serviceStatus =='BUYER_RETURN' || afterSaleInfo.serviceStatus =='COMPLETE' &&  afterSaleInfo.serviceType !='RETURN_MONEY'">
      <div class="title">回寄物流信息</div>
      <div class="flex col">
        <div>物流公司</div>
        <div>{{ afterSaleInfo.mlogisticsName }}</div>
      </div>
      <div class="flex col">
        <div>物流单号</div>
        <div>{{ afterSaleInfo.mlogisticsNo }}</div>
      </div>
      <div class="query-log" @click="handleClickLog">查询物流</div>
      <div class="rejection" @click="showconfirmMethods('REFUSE')" v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">拒收</div>
      <u-modal show-cancel-button 
	  async-close mask-close-able 
	  @confirm="confirm" 
	  :confirm-style="{color:'#333'}" 
	  :title="showconfirmTitle" 
	  v-model="showconfirm" 
	  :content="showconfirmContent">
	  <view style=" padding: 18rpx;" v-if="afterSaleInfo.serviceStatus == 'BUYER_RETURN'">
	  	<u-form  :model="params">
	  	  	<u-form-item label="请填写拒收原因" label-position="top">
	  	  		<u-input v-model="params.remark" type="textarea" :border="true" placeholder="请填写" />
	  		</u-form-item>
	  	</u-form>
	  </view>
      </u-modal>
    </div>

  </div>
</template>

<script>
import {
  afterSaleOrderDetail,
  afterSaleSellerReview,
  afterSaleSellerConfirm,
} from "@/api/order";
export default {
  data() {
    return {
      showconfirmTitle: "", //确认收货/拒收模态框显示的标题
      showconfirmContent: "", //确认收货/拒收模态框显示的内容
      showconfirm: false, //是否显示确认收货/拒收模态框
      afterSaleInfo: {}, //售后详情
	  serviceType:"",//售后类型
      routerVal: "",
	  way : {
		  "RETURN_GOODS":"退货",
		   "RETURN_MONEY":"退款",
		   "EXCHANGE_GOODS":"换货",
		   "REPAIR_GOODS":"维修"
	  },
	  plan:{
		  
	  },
      afterSaleImage: [], //会员申诉图片
      params: {
        //商家处理意见
        serviceStatus: true,
        remark: "",
        actualRefundPrice: 0,
      }, //传值
      inputStyle: {
        background: "#f7f7f7",
        "padding-left": "20rpx",
        "border-radius": "10rpx",
      },
    };
  },
  computed:{
	  afterSaleType(){
		  return this.way[this.serviceType]
	  },
	  orderStatus(){
		  return (this.afterSaleInfo.serviceType === "EXCHANGE_GOODS" ||
					this.afterSaleInfo.serviceType === "REPAIR_GOODS") &&
					this.afterSaleInfo.serviceStatus === "SELLER_CONFIRM"
	  }
  },
  onLoad(options) {
    this.routerVal = options;
  },
  onShow() {
    this.init();
  },
  methods: {
	  // 发货
	  ship() {
	    uni.navigateTo({
	      url: `/pages/order/afterSales/afterSalesSend/afterSalesSend?sn=${encodeURIComponent(
	        JSON.stringify(this.afterSaleInfo.sn)
	      )}`,
	    });
	  },
    /**
     * 点击图片放大或保存
     */
    preview(urls, index) {
      uni.previewImage({
        current: index,
        urls: urls,
        longPressActions: {
          itemList: ["保存图片"],
          success: function (data) {},
          fail: function (err) {},
        },
      });
    },
    // 签收/拒收
    async confirm() {
      console.log("123");
	  if(this.afterSaleInfo.serviceStatus === "BUYER_RETURN" && !this.params.remark){
		uni.showToast({
			title: "请填写拒收原因！",
			duration: 1000,
			icon: "none",
		})
	  	return;
	  }
      let res = await afterSaleSellerConfirm(this.routerVal.sn, this.params);
      if (res.data.success) {
        // this.$refs.uModal.clearLoading();
		this.showconfirm = false
        this.init();
      }
      // this.$refs.uModal.clearLoading();
    },

    showconfirmMethods(type) {
      this.showconfirmTitle = "确认收货";
      this.showconfirmContent = "请确认已经收到退货货物?";

      if (type !== "PASS") {
        this.showconfirmTitle = "确认拒收";
        this.showconfirmContent = "确认拒收此货物？";
        this.params.serviceStatus = "REFUSE";
      } else {
        this.params.serviceStatus = "PASS";
      }

      this.showconfirm = true;
    },

    //提交商家处理信息
    async handleSubmit() {
		if(!this.params.actualRefundPrice){
			this.params.actualRefundPrice = 0
		}
      let params = JSON.parse(JSON.stringify(this.params));
      if (params.remark == "") {
        uni.showToast({
          title: "请输入备注信息",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      params.serviceStatus
        ? (params.serviceStatus = "PASS")
        : (params.serviceStatus = "REFUSE");
      let res = await afterSaleSellerReview(this.routerVal.sn, params);
      if (res.data.success) {
        uni.showToast({
          title: "处理成功!",
          duration: 2000,
          icon: "none",
        });
        this.params.remark = "";
        this.init();
      }
      uni.hideLoading();
    },

    // 初始化售后详情
    async init() {
      let res = await afterSaleOrderDetail({ sn: this.routerVal.sn });
      if (res.data.success) {
        this.afterSaleInfo = res.data.result;
		this.serviceType = res.data.result.serviceType
        this.afterSaleImage = (res.data.result.afterSaleImage || "").split(",");
        this.params.actualRefundPrice = res.data.result.actualRefundPrice;
      }
    },

    // 查看物流
    handleClickLog() {
      uni.navigateTo({
        url: `/pages/order/logistics?sn=${this.routerVal.sn}&type=0`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding-bottom: 200rpx;
}
.box {
  padding: 32rpx;
}
.comments {
  /deep/ .col {
    margin: 24rpx 0;
  }
}
.title {
  font-size: 32rpx;
}
.goods-name {
  margin-left: 20rpx !important;
  flex: 3;
}
.title{
  margin-bottom: 20rpx;
}
.goods-total {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
}
.col {
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between;
  margin: 10rpx 0;
  line-height: 1.75;

  > div:nth-of-type(1) {
    font-size: 24rpx;
    color: #999;
  }
  > div:nth-of-type(2) {
    font-weight: bold;

    > span {
      font-size: 40rpx;
      margin-left: 10rpx;
    }
  }
  > div {
    margin: 0 4rpx;
    display: flex;

    align-items: center;
    justify-content: flex-end;
  }
}
.image {
  margin: 10rpx;
}
.rejection,
.query-log {
  border-radius: 20rpx;
  height: 70rpx;
  color: #fff;
  text-align: center;
  margin: 70rpx auto 0 auto;
  line-height: 70rpx;
  background: #333;
}
.done {
  margin-right: 32rpx;
  font-weight: bold;
}
.rejection {
  margin-top: 20rpx;
  background: #ededed;
  color: #333;
}
</style>